<%@ page import="java.util.List" %>
<%@ page import="pojo.Shop" %>
<%@ page import="dao.CourseDao" %>
<%@ page import="pojo.Course" %><%--
  Created by IntelliJ IDEA.
  User: 秦乾正
  Date: 2023/11/8
  Time: 10:25
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>购物车</title>
        <link rel="stylesheet" href="./css/shopcar.css">
        <script src="js/jquery-3.7.1.min.js"></script>
    </head>
    <body>
        <h1>购物车列表</h1>
        <hr>
        <form action="checkoutpage.jsp" method="post">
            <table>
                <tr>
                    <th>序号</th>
                    <th>选择</th>
                    <th>课程图片</th>
                    <th>课程名称</th>
                    <th>价格</th>
                    <th>操作</th> <!-- 新增操作列 -->

                </tr>
                <%
                    List<Shop> shopList = (List<Shop>) request.getAttribute("shopList");
                    int i = 0;
                    int count = 0;
                    double totalPrice = 0.0;
                    for (Shop shop : shopList) {
                %>
                <tr>
                    <td><%=++i%>
                    </td>
                    <td>
                        <input type="checkbox" name="selectedItems" value="<%=shop.getId()%>"
                                <%
                                    if (shop.getState() == 1) {
                                        count++;
                                %> checked <%}%>
                               onclick="updateTotal(this)"/>
                    </td>
                    <%
                        Course course = new CourseDao().findOne(shop.getCourse());
                    %>
                    <td><img src="<%=course.getImagepath()%>" class="course-image"/></td>
                    <td><%=course.getName()%>
                    </td>
                    <td><%=course.getPrice()%>
                    </td>
                    <td>
                        <a style="cursor: pointer" oncopy="return false" oncut="return false;"
                           onselectstart="return false" oncontextmenu="return false"
                           href="/delete?shopid=<%=shop.getId()%>">删除</a>
                    </td>

                </tr>
                <%
                    }
                %>
                <tr>
                    <td></td>
                    <td>
                        <input type="checkbox" id="selectAll"
                                <%
                                    if (count == i) {
                                %>
                               checked <%}%>
                               onclick="selectAllItems(this)"/>
                        <label for="selectAll">全选</label>
                    </td>
                    <td></td>
                    <td></td>
                    <td>
                        <p class="total-amount">总金额: <span id="totalAmount">0.0</span></p>
                    </td>
                    <td></td> <!-- 空列，与商品列表对齐 -->
                </tr>
            </table>
            <hr>
            <a class="checkout-button" style="cursor: pointer" oncopy="return false" oncut="return false;"
               onselectstart="return false" oncontextmenu="return false" href="/checkoutpage">结算商品</a>
            <input type="hidden" name="selectedItemNames" id="selectedItemNames" value="">
        </form>
        <script>
            window.onload = updateTotal();
            function updateTotal() {
                var totalAmount = 0.0;
                var selectedNames = [];
                var checkboxes = document.getElementsByName("selectedItems");

                for (var i = 0; i < checkboxes.length; i++) {
                    if (checkboxes[i].checked) {
                        var price = parseFloat(checkboxes[i].parentNode.nextElementSibling.nextElementSibling.nextElementSibling.innerHTML);
                        totalAmount += price;
                        selectedNames.push(checkboxes[i].parentNode.nextElementSibling.nextElementSibling.innerHTML);

                        // 将选中商品的state值更改为1（假设第7列为state）
                        //checkboxes[i].parentNode.nextElementSibling.nextElementSibling.nextElementSibling.nextElementSibling.nextElementSibling.innerHTML = '1';

                        // 发送AJAX请求更新数据库中的state值
                        updateDatabaseState(checkboxes[i].value, '1');
                    } else {
                        // 未被选中的商品的状态为0
                        //checkboxes[i].parentNode.nextElementSibling.nextElementSibling.nextElementSibling.nextElementSibling.nextElementSibling.innerHTML = '0';

                        // 发送AJAX请求更新数据库中的state值
                        updateDatabaseState(checkboxes[i].value, '0');
                    }
                }

                document.getElementById("totalAmount").textContent = totalAmount.toFixed(2);

                // 使用选中商品的名称更新隐藏的输入字段
                document.getElementById("selectedItemNames").value = selectedNames.join(',');
            }

            function updateDatabaseState(itemId, newState) {
                // 使用AJAX发送请求到服务器端更新数据库中的state值
                var xhr = new XMLHttpRequest();
                xhr.open("POST", "/updateStateServlet", true);
                xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                xhr.send("itemId=" + itemId + "&newState=" + newState);
            }


            function selectAllItems(checkbox) {
                var checkboxes = document.getElementsByName("selectedItems");
                for (var i = 0; i < checkboxes.length; i++) {
                    checkboxes[i].checked = checkbox.checked;

                }
                updateTotal();
            }
        </script>
        <style>
            <%@include file="./css/shopcar.css" %>
        </style>
    </body>
</html>
